<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>神秘竞拍</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#7B61FF',
                        accent: '#FF4D4F',
                        dark: '#1D2129',
                        light: '#F2F3F5',
                        'neutral-100': '#FFFFFF',
                        'neutral-200': '#F5F5F5',
                        'neutral-300': '#E5E5E5',
                        'neutral-400': '#D9D9D9',
                        'neutral-500': '#BFBFBF',
                        'neutral-600': '#8C8C8C',
                        'neutral-700': '#595959',
                        'neutral-800': '#434343',
                        'neutral-900': '#262626',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'glow': '0 0 15px rgba(22, 93, 255, 0.5)',
                        'glow-lg': '0 0 25px rgba(22, 93, 255, 0.7)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-mesh {
                background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
                background-size: 30px 30px;
            }
            .text-shadow {
                text-shadow: 0 0 10px rgba(22, 93, 255, 0.7);
            }
            .btn-glow {
                box-shadow: 0 0 10px rgba(22, 93, 255, 0.5);
                transition: all 0.3s ease;
            }
            .btn-glow:hover {
                box-shadow: 0 0 20px rgba(22, 93, 255, 0.7);
                transform: translateY(-2px);
            }
            .animate-pulse-slow {
                animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .glass {
                background: rgba(17, 25, 40, 0.5);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.18);
            }
        }
    </style>
</head>
<body class="font-inter bg-dark text-light min-h-screen overflow-x-hidden bg-mesh">
    <!-- 背景视频/图片 -->
    <div class="fixed inset-0 z-0">
        <img src="https://picsum.photos/id/1019/1920/1080" alt="竞拍背景" class="w-full h-full object-cover opacity-30">
    </div>
    
    <!-- 顶部导航 -->
    <header class="fixed top-0 left-0 right-0 z-50 glass py-4 px-6 md:px-12 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa-solid fa-gavel text-primary text-2xl"></i>
            <h1 class="text-xl md:text-2xl font-bold tracking-tight">神秘竞拍</h1>
        </div>
        <div class="flex items-center space-x-6">
            <div class="hidden md:flex items-center space-x-4">
                <span class="text-sm text-neutral-400">当前账户:</span>
                <span id="currentAccount" class="text-sm font-medium truncate max-w-[150px]">未连接</span>
            </div>
            <button id="connectWallet" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md text-sm font-medium transition-all duration-300 transform hover:scale-105">
                <i class="fa-solid fa-wallet mr-2"></i>连接钱包
            </button>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="relative z-10 container mx-auto px-4 pt-32 pb-20 max-w-6xl">
        <!-- 竞拍物品展示 -->
        <section class="mb-12">
            <div class="glass rounded-2xl p-6 md:p-8 overflow-hidden relative">
                <div class="absolute -right-10 -top-10 w-40 h-40 bg-primary/20 rounded-full filter blur-3xl"></div>
                <div class="absolute -left-10 -bottom-10 w-40 h-40 bg-secondary/20 rounded-full filter blur-3xl"></div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
                    <div class="flex flex-col">
                        <div class="relative rounded-xl overflow-hidden mb-4 group">
                            <img src="https://picsum.photos/id/1039/800/600" alt="神秘物品" class="w-full h-auto object-cover transition-transform duration-700 group-hover:scale-105">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                            <div class="absolute bottom-4 left-4 right-4">
                                <span class="inline-block bg-accent/90 text-white px-3 py-1 rounded-full text-xs font-medium mb-2">热门拍品</span>
                                <h2 class="text-2xl md:text-3xl font-bold text-white">古代神秘法典</h2>
                                <p class="text-neutral-300 text-sm mt-1">传说中蕴含无限力量的神秘法典，拥有改变命运的能力</p>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-2 gap-4">
                            <div class="glass rounded-lg p-4">
                                <h3 class="text-neutral-400 text-sm mb-1">当前最高价</h3>
                                <div class="flex items-end">
                                    <span id="currentBid" class="text-2xl font-bold text-white">0 ETH</span>
                                    <span class="text-neutral-400 text-sm ml-1 mb-0.5">≈ ¥0</span>
                                </div>
                            </div>
                            <div class="glass rounded-lg p-4">
                                <h3 class="text-neutral-400 text-sm mb-1">剩余时间</h3>
                                <div class="flex items-end">
                                    <span id="timeRemaining" class="text-2xl font-bold text-white">00:00:00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex flex-col justify-between">
                        <div>
                            <h3 class="text-xl font-semibold mb-4">拍品详情</h3>
                            <p class="text-neutral-300 mb-6">
                                这件神秘法典据说来自古代文明，蕴含着无尽的智慧和力量。历代拥有者都曾改变了世界的格局。
                                法典由特殊材质制成，历经千年依然保存完好，表面刻有神秘符文，至今无人能完全解读。
                            </p>
                            
                            <div class="glass rounded-lg p-5 mb-6">
                                <h4 class="text-lg font-medium mb-3">竞拍记录</h4>
                                <div id="bidHistory" class="space-y-3 max-h-60 overflow-y-auto pr-2">
                                    <div class="animate-pulse-slow">
                                        <div class="flex justify-between items-center text-sm">
                                            <div>
                                                <span class="text-neutral-300">暂无竞拍记录</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <button id="placeBid" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-medium btn-glow">
                                <i class="fa-solid fa-gavel mr-2"></i>用户竞拍
                            </button>
                            <button id="withdraw" class="bg-secondary hover:bg-secondary/90 text-white px-6 py-3 rounded-lg font-medium btn-glow">
                                <i class="fa-solid fa-arrow-down-right-from-square mr-2"></i>用户提款
                            </button>
                            <button id="endAuction" class="bg-accent hover:bg-accent/90 text-white px-6 py-3 rounded-lg font-medium btn-glow">
                                <i class="fa-solid fa-stop-circle mr-2"></i>结束拍卖
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 竞拍统计 -->
        <section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
            <div class="glass rounded-xl p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold">总竞拍次数</h3>
                    <i class="fa-solid fa-gavel text-primary text-xl"></i>
                </div>
                <p id="totalBids" class="text-3xl font-bold text-white">0</p>
                <p class="text-neutral-400 text-sm mt-1">自拍卖开始以来的总竞拍次数</p>
            </div>
            
            <div class="glass rounded-xl p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold">参与人数</h3>
                    <i class="fa-solid fa-users text-secondary text-xl"></i>
                </div>
                <p id="participants" class="text-3xl font-bold text-white">0</p>
                <p class="text-neutral-400 text-sm mt-1">不同账户参与竞拍的数量</p>
            </div>
            
            <div class="glass rounded-xl p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold">当前出价</h3>
                    <i class="fa-solid fa-coins text-accent text-xl"></i>
                </div>
                <p id="currentBidAmount" class="text-3xl font-bold text-white">0 ETH</p>
                <p class="text-neutral-400 text-sm mt-1">当前最高竞拍价格</p>
            </div>
        </section>
        
        <!-- 最近竞拍者 -->
        <section class="mb-12">
            <div class="glass rounded-xl p-6">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-xl font-semibold">最近竞拍者</h3>
                    <a href="#" class="text-primary hover:text-primary/80 text-sm flex items-center">
                        查看全部 <i class="fa-solid fa-arrow-right ml-1"></i>
                    </a>
                </div>
                
                <div id="recentBidders" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                    <div class="animate-pulse-slow">
                        <div class="glass rounded-lg p-4 flex items-center">
                            <div class="w-12 h-12 rounded-full bg-neutral-800 flex items-center justify-center text-neutral-500">
                                <i class="fa-solid fa-user"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium">暂无竞拍者</p>
                                <p class="text-xs text-neutral-400">等待第一位竞拍者</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 竞拍弹窗 -->
    <div id="bidModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
        <div class="relative glass rounded-2xl p-8 max-w-md w-full mx-4 transform transition-all">
            <div class="absolute top-4 right-4">
                <button id="closeBidModal" class="text-neutral-400 hover:text-white">
                    <i class="fa-solid fa-times text-xl"></i>
                </button>
            </div>
            
            <h3 class="text-2xl font-bold mb-6">参与竞拍</h3>
            
            <div class="mb-6">
                <label class="block text-neutral-300 text-sm font-medium mb-2">当前最高价</label>
                <div class="glass rounded-lg p-4">
                    <p id="modalCurrentBid" class="text-xl font-bold">0 ETH</p>
                </div>
            </div>
            
            <div class="mb-6">
                <label for="bidAmount" class="block text-neutral-300 text-sm font-medium mb-2">竞拍金额 (ETH)</label>
                <div class="relative">
                    <input type="number" id="bidAmount" min="0.01" step="0.01" class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-primary">
                    <span class="absolute right-4 top-3 text-neutral-400">ETH</span>
                </div>
                <p id="bidError" class="text-accent text-sm mt-2 hidden">竞拍金额必须大于当前最高价</p>
            </div>
            
            <button id="confirmBid" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 rounded-lg transition-all">
                确认竞拍
            </button>
        </div>
    </div>

    <!-- 提款弹窗 -->
    <div id="withdrawModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
        <div class="relative glass rounded-2xl p-8 max-w-md w-full mx-4 transform transition-all">
            <div class="absolute top-4 right-4">
                <button id="closeWithdrawModal" class="text-neutral-400 hover:text-white">
                    <i class="fa-solid fa-times text-xl"></i>
                </button>
            </div>
            
            <h3 class="text-2xl font-bold mb-6">提取资金</h3>
            
            <div class="mb-6">
                <label class="block text-neutral-300 text-sm font-medium mb-2">可提取金额</label>
                <div class="glass rounded-lg p-4">
                    <p id="withdrawableAmount" class="text-xl font-bold">0 ETH</p>
                </div>
            </div>
            
            <button id="confirmWithdraw" class="w-full bg-secondary hover:bg-secondary/90 text-white font-medium py-3 rounded-lg transition-all">
                确认提取
            </button>
        </div>
    </div>

    <!-- 结束拍卖弹窗 -->
    <div id="endAuctionModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
        <div class="relative glass rounded-2xl p-8 max-w-md w-full mx-4 transform transition-all">
            <div class="absolute top-4 right-4">
                <button id="closeEndAuctionModal" class="text-neutral-400 hover:text-white">
                    <i class="fa-solid fa-times text-xl"></i>
                </button>
            </div>
            
            <h3 class="text-2xl font-bold mb-6">结束拍卖</h3>
            
            <div class="mb-6">
                <p class="text-neutral-300 mb-4">确定要结束当前拍卖吗？结束后将无法继续竞拍，最高出价者将赢得拍品。</p>
                
                <div class="glass rounded-lg p-4 mb-4">
                    <h4 class="text-neutral-300 text-sm mb-2">当前最高出价</h4>
                    <p id="finalBidAmount" class="text-xl font-bold">0 ETH</p>
                    
                    <h4 class="text-neutral-300 text-sm mb-2 mt-4">最高出价者</h4>
                    <p id="highestBidder" class="text-xl font-bold truncate">未确定</p>
                </div>
            </div>
            
            <button id="confirmEndAuction" class="w-full bg-accent hover:bg-accent/90 text-white font-medium py-3 rounded-lg transition-all">
                确认结束拍卖
            </button>
        </div>
    </div>

    <!-- 成功提示 -->
    <div id="successToast" class="fixed bottom-6 right-6 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-500 z-50 flex items-center">
        <i class="fa-solid fa-check-circle mr-2"></i>
        <span id="successMessage">操作成功</span>
    </div>

    <!-- 错误提示 -->
    <div id="errorToast" class="fixed bottom-6 right-6 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-500 z-50 flex items-center">
        <i class="fa-solid fa-exclamation-circle mr-2"></i>
        <span id="errorMessage">操作失败</span>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script>
        // 初始化 Web3
        let web3;
        let currentAccount = null;
        let auctionContract = null;
        
        // 拍卖状态
        let auction = {
            highestBid: 0,
            highestBidder: '',
            ended: false,
            startTime: Math.floor(Date.now() / 1000),
            endTime: Math.floor(Date.now() / 1000) + 24 * 60 * 60, // 24小时后结束
            bids: []
        };
        
        // 模拟竞拍数据
        const mockBids = [
            { bidder: '0x742d35Cc6634C0532925a3b844Bc454e4438f4', amount: 1.2, timestamp: Math.floor(Date.now() / 1000) - 3600 },
            { bidder: '0x821aEa9a577a9b44279b9c13cDA34f13259bB', amount: 1.5, timestamp: Math.floor(Date.now() / 1000) - 2400 },
            { bidder: '0x9821aEa9a577a9b44279b9c13cDA34f13259bB', amount: 1.8, timestamp: Math.floor(Date.now() / 1000) - 1200 },
            { bidder: '0x742d35Cc6634C0532925a3b844Bc454e4438f4', amount: 2.0, timestamp: Math.floor(Date.now() / 1000) - 600 }
        ];
        
        // DOM 元素
        const connectWalletBtn = document.getElementById('connectWallet');
        const currentAccountEl = document.getElementById('currentAccount');
        const placeBidBtn = document.getElementById('placeBid');
        const withdrawBtn = document.getElementById('withdraw');
        const endAuctionBtn = document.getElementById('endAuction');
        const bidModal = document.getElementById('bidModal');
        const closeBidModal = document.getElementById('closeBidModal');
        const confirmBid = document.getElementById('confirmBid');
        const bidAmount = document.getElementById('bidAmount');
        const bidError = document.getElementById('bidError');
        const modalCurrentBid = document.getElementById('modalCurrentBid');
        const withdrawModal = document.getElementById('withdrawModal');
        const closeWithdrawModal = document.getElementById('closeWithdrawModal');
        const confirmWithdraw = document.getElementById('confirmWithdraw');
        const withdrawableAmount = document.getElementById('withdrawableAmount');
        const endAuctionModal = document.getElementById('endAuctionModal');
        const closeEndAuctionModal = document.getElementById('closeEndAuctionModal');
        const confirmEndAuction = document.getElementById('confirmEndAuction');
        const finalBidAmount = document.getElementById('finalBidAmount');
        const highestBidder = document.getElementById('highestBidder');
        const currentBidEl = document.getElementById('currentBid');
        const currentBidAmountEl = document.getElementById('currentBidAmount');
        const timeRemainingEl = document.getElementById('timeRemaining');
        const totalBidsEl = document.getElementById('totalBids');
        const participantsEl = document.getElementById('participants');
        const bidHistoryEl = document.getElementById('bidHistory');
        const recentBiddersEl = document.getElementById('recentBidders');
        const successToast = document.getElementById('successToast');
        const successMessage = document.getElementById('successMessage');
        const errorToast = document.getElementById('errorToast');
        const errorMessage = document.getElementById('errorMessage');
        
        // 初始化
        async function init() {
            // 检查 Web3 提供者
            if (window.ethereum) {
                web3 = new Web3(window.ethereum);
                try {
                    // 获取账户
                    const accounts = await window.ethereum.request({ method: 'eth_accounts' });
                    if (accounts.length > 0) {
                        currentAccount = accounts[0];
                        currentAccountEl.textContent = currentAccount.substring(0, 6) + '...' + currentAccount.substring(currentAccount.length - 4);
                    }
                } catch (error) {
                    console.error('获取账户失败:', error);
                }
            } else {
                console.error('未检测到 Web3 提供者，请安装 MetaMask 或其他钱包扩展');
            }
            
            // 模拟拍卖数据
            updateAuctionData(mockBids);
            
            // 开始倒计时
            startCountdown();
            
            // 添加事件监听器
            connectWalletBtn.addEventListener('click', connectWallet);
            placeBidBtn.addEventListener('click', openBidModal);
            closeBidModal.addEventListener('click', closeBidModalFunc);
            confirmBid.addEventListener('click', handleBid);
            withdrawBtn.addEventListener('click', openWithdrawModal);
            closeWithdrawModal.addEventListener('click', closeWithdrawModalFunc);
            confirmWithdraw.addEventListener('click', handleWithdraw);
            endAuctionBtn.addEventListener('click', openEndAuctionModal);
            closeEndAuctionModal.addEventListener('click', closeEndAuctionModalFunc);
            confirmEndAuction.addEventListener('click', handleEndAuction);
            
            // 监听账户变化
            if (window.ethereum) {
                window.ethereum.on('accountsChanged', (accounts) => {
                    if (accounts.length > 0) {
                        currentAccount = accounts[0];
                        currentAccountEl.textContent = currentAccount.substring(0, 6) + '...' + currentAccount.substring(currentAccount.length - 4);
                        showSuccessToast('已连接到新账户');
                    } else {
                        currentAccount = null;
                        currentAccountEl.textContent = '未连接';
                        showErrorToast('已断开连接');
                    }
                });
            }
        }
        
        // 连接钱包
        async function connectWallet() {
            if (!window.ethereum) {
                showErrorToast('请安装 MetaMask 或其他钱包扩展');
                return;
            }
            
            try {
                const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
                currentAccount = accounts[0];
                currentAccountEl.textContent = currentAccount.substring(0, 6) + '...' + currentAccount.substring(currentAccount.length - 4);
                showSuccessToast('钱包连接成功');
            } catch (error) {
                console.error('连接钱包失败:', error);
                showErrorToast('连接钱包失败');
            }
        }
        
        // 更新拍卖数据
        function updateAuctionData(bids) {
            if (bids.length === 0) return;
            
            // 找到最高出价
            const sortedBids = [...bids].sort((a, b) => b.amount - a.amount);
            auction.highestBid = sortedBids[0].amount;
            auction.highestBidder = sortedBids[0].bidder;
            auction.bids = bids;
            
            // 更新UI
            currentBidEl.textContent = `${auction.highestBid} ETH`;
            currentBidAmountEl.textContent = `${auction.highestBid} ETH`;
            modalCurrentBid.textContent = `${auction.highestBid} ETH`;
            finalBidAmount.textContent = `${auction.highestBid} ETH`;
            highestBidder.textContent = auction.highestBidder.substring(0, 6) + '...' + auction.highestBidder.substring(auction.highestBidder.length - 4);
            
            // 更新竞拍历史
            updateBidHistory();
            
            // 更新最近竞拍者
            updateRecentBidders();
            
            // 更新统计数据
            totalBidsEl.textContent = bids.length;
            
            // 计算不同参与者数量
            const uniqueBidders = [...new Set(bids.map(bid => bid.bidder))];
            participantsEl.textContent = uniqueBidders.length;
        }
        
        // 更新竞拍历史
        function updateBidHistory() {
            bidHistoryEl.innerHTML = '';
            
            if (auction.bids.length === 0) {
                bidHistoryEl.innerHTML = `
                    <div class="animate-pulse-slow">
                        <div class="flex justify-between items-center text-sm">
                            <div>
                                <span class="text-neutral-300">暂无竞拍记录</span>
                            </div>
                        </div>
                    </div>
                `;
                return;
            }
            
            // 只显示最近的5条记录
            const recentBids = auction.bids.slice(-5).reverse();
            
            recentBids.forEach(bid => {
                const bidderShort = bid.bidder.substring(0, 6) + '...' + bid.bidder.substring(bid.bidder.length - 4);
                const timestamp = new Date(bid.timestamp * 1000).toLocaleString();
                
                const bidItem = document.createElement('div');
                bidItem.className = 'flex justify-between items-center text-sm';
                bidItem.innerHTML = `
                    <div>
                        <span class="font-medium">${bidderShort}</span>
                        <span class="text-neutral-400 ml-2">${timestamp}</span>
                    </div>
                    <div class="font-bold">+${bid.amount} ETH</div>
                `;
                
                bidHistoryEl.appendChild(bidItem);
            });
        }
        
        // 更新最近竞拍者
        function updateRecentBidders() {
            recentBiddersEl.innerHTML = '';
            
            if (auction.bids.length === 0) {
                recentBiddersEl.innerHTML = `
                    <div class="animate-pulse-slow">
                        <div class="glass rounded-lg p-4 flex items-center">
                            <div class="w-12 h-12 rounded-full bg-neutral-800 flex items-center justify-center text-neutral-500">
                                <i class="fa-solid fa-user"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium">暂无竞拍者</p>
                                <p class="text-xs text-neutral-400">等待第一位竞拍者</p>
                            </div>
                        </div>
                    </div>
                `;
                return;
            }
            
            // 只显示最近的4个竞拍者
            const recentBidders = [...new Set(auction.bids.slice(-4).map(bid => bid.bidder))].reverse();
            
            recentBidders.forEach(bidder => {
                const bidderShort = bidder.substring(0, 6) + '...' + bidder.substring(bidder.length - 4);
                const bidderBids = auction.bids.filter(b => b.bidder === bidder);
                const totalBidAmount = bidderBids.reduce((sum, bid) => sum + bid.amount, 0);
                
                const bidderItem = document.createElement('div');
                bidderItem.className = 'glass rounded-lg p-4 flex items-center';
                bidderItem.innerHTML = `
                    <div class="w-12 h-12 rounded-full bg-neutral-800 flex items-center justify-center text-neutral-400">
                        <i class="fa-solid fa-user"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium">${bidderShort}</p>
                        <p class="text-xs text-neutral-400">总出价: ${totalBidAmount} ETH</p>
                    </div>
                `;
                
                recentBiddersEl.appendChild(bidderItem);
            });
        }
        
        // 开始倒计时
        function startCountdown() {
            updateCountdown();
            setInterval(updateCountdown, 1000);
        }
        
        // 更新倒计时
        function updateCountdown() {
            const now = Math.floor(Date.now() / 1000);
            const diff = auction.endTime - now;
            
            if (diff <= 0) {
                timeRemainingEl.textContent = '拍卖已结束';
                return;
            }
            
            const hours = Math.floor(diff / 3600);
            const minutes = Math.floor((diff % 3600) / 60);
            const seconds = diff % 60;
            
            timeRemainingEl.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
        
        // 打开竞拍弹窗
        function openBidModal() {
            if (!currentAccount) {
                showErrorToast('请先连接钱包');
                return;
            }
            
            bidAmount.value = (auction.highestBid + 0.1).toFixed(2);
            bidError.classList.add('hidden');
            bidModal.classList.remove('hidden');
        }
        
        // 关闭竞拍弹窗
        function closeBidModalFunc() {
            bidModal.classList.add('hidden');
        }
        
        // 处理竞拍
        function handleBid() {
            const amount = parseFloat(bidAmount.value);
            
            if (isNaN(amount) || amount <= 0) {
                bidError.textContent = '请输入有效的竞拍金额';
                bidError.classList.remove('hidden');
                return;
            }
            
            if (amount <= auction.highestBid) {
                bidError.textContent = '竞拍金额必须大于当前最高价';
                bidError.classList.remove('hidden');
                return;
            }
            
            // 模拟竞拍成功
            const newBid = {
                bidder: currentAccount,
                amount: amount,
                timestamp: Math.floor(Date.now() / 1000)
            };
            
            // 添加到拍卖数据
            auction.bids.push(newBid);
            
            // 更新UI
            updateAuctionData(auction.bids);
            
            // 关闭弹窗
            closeBidModalFunc();
            
            // 显示成功提示
            showSuccessToast('竞拍成功！您现在是最高出价者');
        }
        
        // 打开提款弹窗
        function openWithdrawModal() {
            if (!currentAccount) {
                showErrorToast('请先连接钱包');
                return;
            }
            
            // 模拟可提取金额
            const mockWithdrawable = currentAccount === auction.highestBidder ? 0 : Math.random() * 2;
            withdrawableAmount.textContent = `${mockWithdrawable.toFixed(2)} ETH`;
            
            withdrawModal.classList.remove('hidden');
        }
        
        // 关闭提款弹窗
        function closeWithdrawModalFunc() {
            withdrawModal.classList.add('hidden');
        }
        
        // 处理提款
        function handleWithdraw() {
            // 模拟提款成功
            closeWithdrawModalFunc();
            showSuccessToast('提款成功，资金已发送到您的钱包');
        }
        
        // 打开结束拍卖弹窗
        function openEndAuctionModal() {
            if (!currentAccount) {
                showErrorToast('请先连接钱包');
                return;
            }
            
            // 模拟只有拍卖创建者可以结束拍卖
            const mockCreator = '0x742d35Cc6634C0532925a3b844Bc454e4438f4';
            
            if (currentAccount !== mockCreator) {
                showErrorToast('您没有权限结束拍卖');
                return;
            }
            
            endAuctionModal.classList.remove('hidden');
        }
        
        // 关闭结束拍卖弹窗
        function closeEndAuctionModalFunc() {
            endAuctionModal.classList.add('hidden');
        }
        
        // 处理结束拍卖
        function handleEndAuction() {
            // 模拟结束拍卖
            auction.ended = true;
            
            // 更新UI
            timeRemainingEl.textContent = '拍卖已结束';
            
            // 关闭弹窗
            closeEndAuctionModalFunc();
            
            // 显示成功提示
            showSuccessToast('拍卖已成功结束，最高出价者已确定');
        }
        
        // 显示成功提示
        function showSuccessToast(message) {
            successMessage.textContent = message;
            successToast.classList.remove('translate-y-20', 'opacity-0');
            successToast.classList.add('translate-y-0', 'opacity-100');
            
            setTimeout(() => {
                successToast.classList.remove('translate-y-0', 'opacity-100');
                successToast.classList.add('translate-y-20', 'opacity-0');
            }, 3000);
        }
        
        // 显示错误提示
        function showErrorToast(message) {
            errorMessage.textContent = message;
            errorToast.classList.remove('translate-y-20', 'opacity-0');
            errorToast.classList.add('translate-y-0', 'opacity-100');
            
            setTimeout(() => {
                errorToast.classList.remove('translate-y-0', 'opacity-100');
                errorToast.classList.add('translate-y-20', 'opacity-0');
            }, 3000);
        }
        
        // 初始化应用
        window.addEventListener('load', init);
    </script>
</body>
</html>
    